<%--
  Created by IntelliJ IDEA.
  User: 苏海娜
  Date: 2025/7/1
  Time: 20:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>回复留言</title>
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f8fa;
            font-family: Arial, sans-serif;
        }
        .board-container {
            max-width: 800px;
            margin: 40px auto;
            background: #fff;
            padding: 36px 32px 30px 32px;
            border-radius: 10px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.09);
        }
        .board-title {
            font-size: 1.55em;
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: 1.5px;
            color: #1976d2;
            text-align: center;
        }
        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .nav-buttons {
            display: flex;
            gap: 10px;
        }
        .btn-custom {
            background: #1976d2;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s;
        }
        .btn-custom:hover {
            background: #145ca6;
            color: #fff;
        }
        .message-card {
            border: 1px solid #eee;
            border-radius: 7px;
            background: #fafbfc;
            padding: 18px 22px 12px 22px;
            margin-bottom: 20px;
            box-shadow: 0 1px 4px #f1f1f1;
        }
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 7px;
        }
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 12px;
            object-fit: cover;
            border: 1.5px solid #ccc;
        }
        .username {
            font-weight: bold;
            margin-right: 10px;
            color: #1976d2;
        }
        .time {
            color: #888;
            font-size: 0.98em;
            margin-left: auto;
        }
        .message-content {
            margin: 9px 0 7px 0;
            font-size: 1.08em;
            word-break: break-all;
        }
        .reply-form textarea {
            resize: vertical;
            min-height: 54px;
        }
        .error {
            color: red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="board-container shadow">
    <div class="board-title"><i class="fa fa-comments"></i> 回复留言</div>

    <!-- 顶部导航栏 -->
    <div class="nav">
        <c:if test="${not empty sessionScope.username}">
            <span>欢迎，${sessionScope.username}</span>
            <div class="nav-buttons">
                <a href="profile.jsp" class="btn-custom">个人信息</a>
                <a href="logout" class="btn-custom">退出</a>
            </div>
        </c:if>
        <c:if test="${empty sessionScope.username}">
            <div class="nav-buttons">
                <a href="login.jsp" class="btn-custom">登录</a>
                <a href="register.jsp" class="btn-custom">注册</a>
            </div>
        </c:if>
    </div>

    <!-- 被回复的留言内容 -->
    <c:if test="${not empty parentMsg}">
        <div class="message-card mb-4">
            <div class="message-header">
                <img class="avatar" src="${parentMsg.user.avatar}" alt="头像">
                <span class="username">${parentMsg.user.username}</span>
                <span class="time">${parentMsg.createdAt}</span>
            </div>
            <div class="message-content">${parentMsg.content}</div>
        </div>
    </c:if>

    <!-- 回复表单 -->
    <c:if test="${not empty sessionScope.username}">
        <form class="reply-form" action="MessageServlet" method="post">
            <input type="hidden" name="action" value="reply">
            <input type="hidden" name="parentId" value="${param.msgId}">
            <div class="mb-3">
                <textarea class="form-control" name="content" maxlength="400" required placeholder="写下你的回复..."></textarea>
            </div>
            <div class="text-end">
                <button type="submit" class="btn btn-success"><i class="fa fa-paper-plane"></i> 发送回复</button>
                <a href="index.jsp" class="btn btn-secondary ms-2"><i class="fa fa-arrow-left"></i> 返回留言板</a>
            </div>
        </form>
    </c:if>
    <c:if test="${empty sessionScope.username}">
        <div class="alert alert-warning text-center mt-3">
            请先<a href="login.jsp">登录</a>后再回复留言。
        </div>
    </c:if>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
